<template>
  <div class="inventory-container">
    <!-- 筛选条件区域 -->
    <div class="filter-container">
      <el-radio-group v-model="filterStatus">
        <el-radio-button 
          v-for="status in statusOptions" 
          :key="status"
          :label="status"
        />
      </el-radio-group>

      <div class="search-group">
        <el-input
          v-model="searchNumber"
          placeholder="请输入盘库单号"
          class="search-input"
          clearable
          @keyup.enter="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
      
      <el-button type="primary" class="add-btn">
        <el-icon><Plus /></el-icon>新增
      </el-button>
    </div>

    <!-- 数据表格 -->
    <el-table 
      :data="filteredData" 
      border 
      stripe
      style="width: 100%" 
      class="data-table"
      v-loading="loading"
    >
      <el-table-column prop="number" label="单号" width="150" fixed />
      <el-table-column prop="warehouse" label="仓库" width="120" />
      <el-table-column prop="status" label="盘库状态" width="110">
        <template #default="{row}">
          <el-tag 
            :type="statusTagMap[row.status]"
            size="small"
          >
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="profitLoss" label="盈亏数" width="90">
        <template #default="{row}">
          <span :class="profitLossClass(row.profitLoss)">
            {{ row.profitLoss > 0 ? '+' : '' }}{{ row.profitLoss }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作时间" width="160">
        <template #default="{row}">
          <div class="time-cell">
            <span class="time-label">创建：</span>{{ row.createTime }}
          </div>
          <div class="time-cell">
            <span class="time-label">更新：</span>{{ row.updateTime }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="operator" label="操作人" width="100" />
      <el-table-column prop="remark" label="备注" show-overflow-tooltip />
      <el-table-column label="操作" width="220" fixed="right">
        <template #default="{row}">
          <el-button 
            v-if="row.status !== '作废'" 
            type="primary" 
            link
            @click="handleEdit(row)"
          >
            修改
          </el-button>
          <el-button type="primary" link @click="handleView(row)">查看</el-button>
          <el-button 
            v-if="row.status === '作废'" 
            type="danger" 
            link
            @click="handleDelete(row)"
          >
            删除
          </el-button>
          <el-button type="primary" link @click="handlePrint(row)">打印</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
  class="pagination"
  :page-size="pagination.pageSize"
  :current-page="pagination.currentPage"
  :total="filteredData.length"
  layout="total, prev, pager, next"
  @current-change="handleCurrentChange"
  @size-change="handleSizeChange"
/>

    <!-- 空状态 -->
    <el-empty v-if="filteredData.length === 0" description="暂无数据" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { Search, Plus } from '@element-plus/icons-vue'

type InventoryStatus = '全部' | '待盘库' | '已盘库' | '作废'

interface InventoryItem {
  number: string
  warehouse: string
  status: InventoryStatus
  profitLoss: number
  createTime: string
  updateTime: string
  operator: string
  remark?: string
}

// 状态选项
const statusOptions: InventoryStatus[] = ['全部', '待盘库', '已盘库', '作废']
const statusTagMap = {
  '待盘库': 'warning',
  '已盘库': 'success',
  '作废': 'danger'
}

// 筛选条件
const filterStatus = ref<InventoryStatus>('全部')
const searchNumber = ref('')
const loading = ref(false)

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 50
})

// 静态数据
const tableData = reactive<InventoryItem[]>([
  {
    number: 'PK03063437',
    warehouse: '苏州园区',
    status: '已盘库',
    profitLoss: 0,
    createTime: '03-06 09:15',
    updateTime: '03-06 09:15',
    operator: 'ck'
  },
  {
    number: 'PK03057646',
    warehouse: '苏州园区',
    status: '已盘库',
    profitLoss: 0,
    createTime: '03-05 20:22',
    updateTime: '03-05 20:22',
    operator: 'ck',
    remark: '常规盘点'
  },
  {
    number: 'PK03041552',
    warehouse: '吴江仓',
    status: '已盘库',
    profitLoss: -3,
    createTime: '03-04 15:09',
    updateTime: '03-04 15:09',
    operator: 'ck'
  },
  {
    number: 'PK03044860',
    warehouse: '苏州园区',
    status: '作废',
    profitLoss: 1,
    createTime: '03-04 09:38',
    updateTime: '03-04 09:38',
    operator: 'ck'
  },
  // 可继续添加更多数据...
])

// 计算属性
const filteredData = computed(() => {
  return tableData.filter(item => {
    const statusMatch = filterStatus.value === '全部' || item.status === filterStatus.value
    const numberMatch = item.number.includes(searchNumber.value.trim())
    return statusMatch && numberMatch
  })
})

const pagedData = computed(() => {
  const start = (pagination.currentPage - 1) * pagination.pageSize
  const end = start + pagination.pageSize
  return filteredData.value.slice(start, end)
})

// 分页事件处理
const handleSizeChange = (newSize: number) => {
  pagination.pageSize = newSize
  pagination.currentPage = 1
}

const handleCurrentChange = (newPage: number) => {
  pagination.currentPage = newPage
}

// 样式处理
const profitLossClass = (value: number) => {
  return {
    'profit-positive': value > 0,
    'profit-negative': value < 0
  }
}

// 操作方法
const handleSearch = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
}

const handleReset = () => {
  searchNumber.value = ''
  filterStatus.value = '全部'
}

const handleEdit = (row: InventoryItem) => {
  console.log('Edit:', row)
}

const handleView = (row: InventoryItem) => {
  console.log('View:', row)
}

const handleDelete = (row: InventoryItem) => {
  console.log('Delete:', row)
}

const handlePrint = (row: InventoryItem) => {
  console.log('Print:', row)
}
</script>

<style scoped lang="scss">
.inventory-container {
  padding: 20px;
  background: #fff;
  min-height: calc(100vh - 60px);

  .filter-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;

    .search-group {
      display: flex;
      align-items: center;
      gap: 10px;
      
      .search-input {
        width: 280px;
      }
    }

    .add-btn {
      margin-left: auto;
      padding: 10px 20px;
    }
  }

  .data-table {
    margin: 20px 0;
    
    :deep(.el-table__header th) {
      background: #f8f9fa;
      font-weight: 600;
    }

    .time-cell {
      line-height: 1.5;
      
      .time-label {
        color: #909399;
      }
    }
  }

  .pagination {
    margin-top: 20px;
    justify-content: flex-end;
  }

  .profit-positive {
    color: #67c23a;
    font-weight: 500;
  }

  .profit-negative {
    color: #f56c6c;
    font-weight: 500;
  }
}
</style>